/**
 * Author: Shen Yanqiu
 * Date: 2017-12-09
 * Time: 17:44
 *
 */
import React from 'react';
import { Button, Row, Col, Form, Select, Input } from 'antd';
import { Page } from 'components';
import { routerRedux } from 'dva/router';
import styles from './index.less';
import { connect } from "dva";
import PropTypes from "prop-types";

const Option = Select.Option;
const FormItem = Form.Item;

class JoinOrganization extends React.Component {
  static propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
    organization: PropTypes.object,
    user: PropTypes.object,
    app: PropTypes.object,
    user: PropTypes.object,
  };
  render () {
    const { dispatch, loading, app, 
      organization, 
      user, 
      form: {
        getFieldDecorator,
        getFieldValue,
        resetFields,
        validateFieldsAndScroll,
      },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };

    const handleOK = () => {
      validateFieldsAndScroll((error, values) => {
        console.log(values);
      });
    };
    // 组织与部门联动
    const handleCommunityChange = (value) => {
      dispatch({
        type: 'organization/changeCommunity',
        payload: value,
      });
      resetFields(["department"]);
    };
    const { community, department } = organization;
    return (
      <Page loading={loading.models.organization}>
        <div className={styles.form}>
          <div className={styles.title}>加入组织</div>
          <Form hideRequiredMark className={styles.formstyle}>
            <FormItem {...formItemLayout} label="学校" hasFeedback >
              {getFieldDecorator('school', {
                rules: [],
                initialValue: `${user.school && user.school.Name || ''}`,
              })(<Input readOnly />)}
            </FormItem>
            <FormItem {...formItemLayout} label="选择组织" >
              {getFieldDecorator('community', {
                rules: [{
                  required: true,
                  message: '组织不能为空！',
                }],
              })(<Select placeholder={"请选择组织"} onChange={handleCommunityChange}>
                {
                  community.length !== 0 ? community.map((item, index) => (
                    <Option key={index} value={item.value}>{item.label}</Option>
                  )) : ''
                }
              </Select>)}
            </FormItem>
            <FormItem {...formItemLayout} label="选择部门" >
              {getFieldDecorator('department', {
                rules: [{
                  required: true,
                  message: '部门不能为空！',
                }],
              })(<Select placeholder={"请选择部门"}>
                {
                  department.length !== 0 ?
                    department.map((item, index) => (
                      <Option key={index} value={item.value}>{item.label}</Option>
                    ))
                    : ''
                }
              </Select>)}
            </FormItem>
            <Row>
              <Col span={4} />
              <Col span={18} className={styles.remind}>
                <p>若无部门和职位，请联系负责人前往管理端添加部门和职位</p>
              </Col>
            </Row>
            <FormItem className={styles.bottomBtn}>
              <Button type="primary" onClick={handleOK} loading={loading.effects.doRegister}>提交</Button>
            </FormItem>
          </Form>
        </div>
      </Page>
    );
  }
}
export default connect(({ loading, app, user, organization }) => ({ loading, app, user, organization }))(Form.create({})(JoinOrganization));
